<template>
    <view class="featured-stories-container">
        <!-- 顶部导航栏 -->
        <!-- <view class="nav-bar">
            <view class="back-button" @click="navigateBack">
                <text class="back-icon">←</text>
                <text class="back-text">返回</text>
                <text class="page-title">精选故事</text>
            </view>
        </view> -->
        <nav-bar title="精选故事" :showBack="true"></nav-bar>


        <!-- 主要内容区 -->
        <scroll-view scroll-y class="main-content">
            <!-- 故事分类标签 -->
            <scroll-view scroll-x class="featured-story-tags-scroll" show-scrollbar="false">
                <view class="featured-story-tags">
                    <view class="featured-story-tag-item active">
                        <text>全部</text>
                    </view>
                    <view class="featured-story-tag-item">
                        <text>感人</text>
                    </view>
                    <view class="featured-story-tag-item">
                        <text>温馨</text>
                    </view>
                    <view class="featured-story-tag-item">
                        <text>回忆</text>
                    </view>
                    <view class="featured-story-tag-item">
                        <text>家庭</text>
                    </view>
                    <!-- <view class="featured-story-tag-item">
                        <text>生活</text>
                    </view> -->
                </view>
            </scroll-view>

            <!-- 故事列表 -->
            <view class="story-list">
                <!-- 故事项目 1 -->
                <view class="story-item" @click="navigateTo('/pages/storylibrary/storyCollection/storyDetail?id=1')">
                    <view class="story-cover">
                        <text class="featured-story-tag">感人</text>
                    </view>
                    <view class="story-content">
                        <text class="story-title">生命的陪伴</text>
                        <text class="story-desc">在生命的最后时光，张阿姨回忆起那些陪伴她走过风雨的人们，以及他们带给她的温暖与力量...</text>
                        <view class="story-meta">
                            <view class="story-author">
                                <text>张阿姨</text>
                            </view>
                            <view class="story-stats">
                                <text class="story-views">1.2k阅读</text>
                                <text class="story-likes">98喜欢</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 故事项目 2 -->
                <view class="story-item" @click="navigateTo('/pages/storylibrary/storyCollection/storyDetail?id=2')">
                    <view class="story-cover story-cover-2">
                        <text class="featured-story-tag">温馨</text>
                    </view>
                    <view class="story-content">
                        <text class="story-title">最后的旅行</text>
                        <text class="story-desc">李伯伯知道自己时日不多，决定完成一次他一直向往的旅行。在这段旅程中，他收获了意外的友情和人生的新体悟...</text>
                        <view class="story-meta">
                            <view class="story-author">
                                <text>李伯伯</text>
                            </view>
                            <view class="story-stats">
                                <text class="story-views">956阅读</text>
                                <text class="story-likes">87喜欢</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 故事项目 3 -->
                <view class="story-item" @click="navigateTo('/pages/storylibrary/storyCollection/storyDetail?id=3')">
                    <view class="story-cover story-cover-3">
                        <text class="featured-story-tag">回忆</text>
                    </view>
                    <view class="story-content">
                        <text class="story-title">童年的记忆</text>
                        <text class="story-desc">王爷爷分享了他童年时代的珍贵记忆，那些简单而美好的日子，以及那个年代特有的生活方式和价值观...</text>
                        <view class="story-meta">
                            <view class="story-author">
                                <text>王爷爷</text>
                            </view>
                            <view class="story-stats">
                                <text class="story-views">845阅读</text>
                                <text class="story-likes">76喜欢</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 故事项目 4 -->
                <view class="story-item">
                    <view class="story-cover story-cover-4">
                        <text class="featured-story-tag">家庭</text>
                    </view>
                    <view class="story-content">
                        <text class="story-title">家的味道</text>
                        <text class="story-desc">刘奶奶讲述了她一生中家庭聚餐的故事，以及那些承载着家族记忆的传统菜肴，每一道菜背后都有一段难忘的故事...</text>
                        <view class="story-meta">
                            <view class="story-author">
                                <text>刘奶奶</text>
                            </view>
                            <view class="story-stats">
                                <text class="story-views">732阅读</text>
                                <text class="story-likes">65喜欢</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 故事项目 5 -->
                <view class="story-item">
                    <view class="story-cover story-cover-5">
                        <text class="featured-story-tag">生活</text>
                    </view>
                    <view class="story-content">
                        <text class="story-title">平凡的坚持</text>
                        <text class="story-desc">赵叔叔分享了他作为一名普通工人几十年如一日的工作经历，以及在平凡岗位上追求卓越的人生态度...</text>
                        <view class="story-meta">
                            <view class="story-author">
                                <text>赵叔叔</text>
                            </view>
                            <view class="story-stats">
                                <text class="story-views">689阅读</text>
                                <text class="story-likes">59喜欢</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 故事项目 6 -->
                <view class="story-item">
                    <view class="story-cover story-cover-6">
                        <text class="featured-story-tag">感人</text>
                    </view>
                    <view class="story-content">
                        <text class="story-title">医者仁心</text>
                        <text class="story-desc">退休医生钱医生回忆了他从医生涯中最难忘的病人和事件，以及那些让他坚持医者仁心信念的感人瞬间...</text>
                        <view class="story-meta">
                            <view class="story-author">
                                <text>钱医生</text>
                            </view>
                            <view class="story-stats">
                                <text class="story-views">812阅读</text>
                                <text class="story-likes">78喜欢</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue'

export default {
    components: {
        NavBar
    },
    data() {
        return {

        }
    },
    methods: {
        navigateTo(url) {
            uni.navigateTo({
                url: url
            });
        },
        navigateBack() {
            uni.navigateBack();
        }
    }
}
</script>

<style>
.featured-stories-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f8f8f8;
}

/* 导航栏样式 */
.nav-bar {
    padding: 20rpx 30rpx;
    /* background-color: #52c41a; */
    background: linear-gradient(135deg, #46bba0, #23804b);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.back-button {
    display: flex;
    align-items: center;
}

.back-icon {
    font-size: 36rpx;
    margin-right: 10rpx;
}

.back-text {
    font-size: 28rpx;
    margin-right: 20rpx;
}

.page-title {
    font-size: 34rpx;
    font-weight: bold;
}

.search-box {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 30rpx;
    padding: 10rpx 20rpx;
    width: 200rpx;
}

.search-box input {
    font-size: 26rpx;
    color: #fff;
}

/* 主内容区样式 */
.main-content {
    flex: 1;
    width: calc(100% - 40rpx);
    padding: 20rpx;
}

/* 故事标签样式 */
.featured-story-tags-scroll {
    width: 100%;
    margin-bottom: 30rpx;
}

.featured-story-tags {
    display: flex;
    width: max-content;
}

.featured-story-tag-item {
    padding: 15rpx 30rpx;
    background-color: #f0f0f0;
    border-radius: 30rpx;
    margin-right: 20rpx;
    transition: all 0.3s;
}

.featured-story-tag-item.active {
    background-color: #46a770;
    color: #fff;
}

.featured-story-tag-item text {
    font-size: 26rpx;
}

/* 故事列表样式 */
.story-list {
    display: flex;
    flex-direction: column;
}

.story-item {
    display: flex;
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
}

.story-item:active {
    transform: scale(0.98);
}

.story-cover {
    width: 200rpx;
    height: 200rpx;
    background-color: #8bc34a;
    background-image: linear-gradient(135deg, #8bc34a, #4caf50);
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 15rpx;
    flex-shrink: 0;
}

.story-cover-2 {
    background-image: linear-gradient(135deg, #ff9800, #ff5722);
}

.story-cover-3 {
    background-image: linear-gradient(135deg, #03a9f4, #2196f3);
}

.story-cover-4 {
    background-image: linear-gradient(135deg, #9c27b0, #673ab7);
}

.story-cover-5 {
    background-image: linear-gradient(135deg, #e91e63, #f44336);
}

.story-cover-6 {
    background-image: linear-gradient(135deg, #009688, #4caf50);
}

.featured-story-tag {
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    font-size: 22rpx;
    padding: 6rpx 12rpx;
    border-radius: 20rpx;
}

.story-content {
    flex: 1;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
}

.story-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
}

.story-desc {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 15rpx;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.story-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.story-author {
    font-size: 24rpx;
    color: #999;
}

.story-stats {
    display: flex;
}

.story-views,
.story-likes {
    font-size: 22rpx;
    color: #999;
    margin-left: 15rpx;
}
</style>